<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            margin: 20px auto;
            width: 100px;
            height: 100px;
            background-color: red;
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function () {

            let oDiv = document.getElementById("div1");
            console.log(oDiv)
        }
    </script>
</head>
<body>
<div id="div1"></div>
<script>
    let oDiv = document.getElementById("div1");
    console.dir(oDiv);
    //事件
    // ->事件就是一件事情,或者一个操作行为
    //  在JS中任何一个元素天生自带了很多的行为(和我们是否为其绑定方法没有关系)
    //->JS中常用的事件类型/操作行为:
    // click\mouseover(mouseenter)\mouseout(mouseleave)\
    // mousemove\mousedown\mouseup\
    // mousewheel\scroll(window.onscroll)\
    // load(window.onload\img.onload)\unload
    // keydown\keyup\keypress\resize(window.onresize)...

    //作业一
    // 尝试并记录以上所有的事件的触发方法

    function fn() {
        console.log("fn");
        return "100"
    }
    function fn1() {
        console.log("fn1")
    }

    //->DOM0: 在给当前元素的某一个私有属性名赋值,当事件触发的时候,获取到属性值,然后把绑定的方法执行即可
//    oDiv.onclick = fn() -->错误写法
    oDiv.onclick = fn;
    oDiv.onclick = fn1;
    //使用DOM0绑定,只能给当前元素的某一个事件行为绑定一个方法,后面绑定的方法会把前面的都替换掉
    //DOM0事件移除
    oDiv.onclick = null;//->移除绑定

    //->DOM2: EventTarget.prototype -> addEventListener/removeEventListener
    // ->为当前元素创建一个事件池,把所有需要绑定的方法存储到事件池中
    // ->当事件触发的时候,到对应的事件池中找到对应的方法 依次执行 即可
//    console.log(EventTarget.prototype)
    oDiv.addEventListener("click",  function () {
        console.log("fn");
    }, false);
    oDiv.addEventListener("click", fn1, false);
//    ->可以给当前的元素的某一个事件行为绑定多个不同的方法
    oDiv.removeEventListener("click",  function () {
        console.log("fn");
    }, false);//->这样是无法移除的,因为是两个不同的匿名函数方法,所哟DOM2中我们绑定的一般都是具名(实名)函数.这样方便后期移除

    //移除事件监听
//    oDiv.addEventListener("click", fn1, false);
//    oDiv.removeEventListener("click", fn1, false);
    //移除时候的三个参数需要和绑定时候一模一样


    //补充 -> 了解

    //DOM2独有的事件类型:DOMContentLoaded->当页面中的HTML结构加载完成就会触发这个事件
    //这个事件在同一个页面中只能使用一次(created)
    window.onload = function(e){
        console.log(e)
    }
//    window.onload  --> $(document).ready()或者$(function(){})
//    1.当页面中的HTML结构\图片\文字\视频音频等所有的资源都加载完毕后就会触发这个事件

//     $(document).ready()
//        只要HTML结构加载完成,就会触发对应事件.在一个页面中可以使用多次


</script>
</body>
</html>